<template>
  <div>
    <button @click="user">用户管理</button>
    <button @click="goods">商品管理</button>
    <child v-if="isflag"></child>
    <son1 v-else></son1>
  </div>
</template>

<script>
import child from "./components/child.vue";
import son1 from "./components/son1.vue";
export default {
  data() {
    return {
      isflag: true,
    };
  },
  components: { child, son1 },
  methods: {
    goods() {
      this.isflag = false;
    },
    user() {
      this.isflag = true;
    },
  },
};
</script>

<style scoped>
</style>

<!-- 第一个子组件
<template>
  <div>
    <button class="btn1">+新增</button>
    <!-- <div class="box">
      <input type="text" placeholder="请输入" /><button class="btn2">
        搜索
      </button>
    </div> 
    <table border="1vh" width="100%">
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>出生日期</th>
          <th>地址</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in newarr" :key="index">
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.gender }}</td>
          <td>{{ item.birthdate }}</td>
          <td>{{ item.address }}</td>
          <td>
            <button class="btn3">编辑</button>
            <button class="btn2">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <son3></son3>
  </div>
</template>

<script>
import bus from "../js/bus.js";
export default {
  data() {
    return {
      array: [
        {
          name: "余丽",
          age: 39,
          gender: "男",
          birthdate: "2007 - 10 - 16",
          address: "江苏省 淮安市 金湖县",
        },
        {
          name: "付杰书",
          age: 29,
          gender: "男",
          birthdate: "2005 - 09 - 27",
          address: "上海市 浦东 闵行区",
        },
        {
          name: "金杰",
          age: 25,
          gender: "男",
          birthdate: "1997 - 02 - 24",
          address: "河北省 邢台市 巨鹿县",
        },
        {
          name: "苏涛",
          age: 32,
          gender: "男",
          birthdate: "1970 - 05 - 15",
          address: "西藏自治区 山南地区 措美县",
        },
        {
          name: "叶芳",
          age: 26,
          gender: "男",
          birthdate: "1989 - 11 - 17",
          address: "澳门特别行政区 澳门半岛",
        },
        {
          name: "叶芳",
          age: 26,
          gender: "男",
          birthdate: "1989 - 11 - 17",
          address: "澳门特别行政区 澳门半岛",
        },
      ],
      newarr: [],
    };
  },
  mounted() {
    bus.$emit("array", this.array);
  },
  created() {
    bus.$on("son3data", (val) => {
      this.newarr = val;
    });
  },
};
</script>

<style lang="less" scoped>
div {
  margin: 0 auto;
}
.btn1 {
  width: 80px;
  height: 40px;
  background-color: rgb(130, 179, 219);
  color: white;
  border-radius: 8px 8px;
  font-size: 20px;
}
table {
  text-align: center;
  // height:0vh;
}
.btn2 {
  width: 50px;
  height: 30px;
  border-radius: 8px 8px;
  background-color: rgb(238, 80, 80);
  color: white;
}
.btn3 {
  width: 50px;
  height: 30px;
  border-radius: 8px 8px;
}
</style>

//第二个子组件
<template>
  <div>
    <!-- <div>
      <div v-for="(item, index) in currentData" :key="index">{{ item }}</div>
    </div> 
    <!-- 按钮 
    <button @click="up()">上一页</button>
    <button
      v-for="(value, index) in btnNum"
      :key="index"
      @click="dataswitch(index)"
      :class="currentIndex == index ? 'color' : ''"
    >
      {{ value }}
    </button>
    <button @click="down()">下一页</button>
  </div>
</template>

<script>
import bus from "../js/bus";
export default {
  data() {
    return {
      msg: [],
      arr: [],
      btnNum: 0, //按钮个数
      //定义每页的条数，定义当前页码
      pagesize: 2,
      currentpage: 1,
      currentData: [],
      currentIndex: 0, //按钮下标
    };
  },
  mounted() {
    bus.$on("array", (val) => {
      this.msg = val;
      //   console.log(this.msg, "111");
      this.list();
      this.getdatalist();
    });
    bus.$on("shop", (val) => {
      this.msg = val;
      //   console.log(this.msg, "111");
      this.list();
      this.getdatalist();
    });
  },
  methods: {
    up() {
      if (this.currentpage > 1) {
        this.currentpage--;
        // console.log(this.currentIndex, this.currentpage);
        this.currentIndex = this.currentpage - 1;
        this.getdatalist();
      }
    },
    down() {
      if (this.currentpage < this.btnNum) {
        this.currentpage++;
        // console.log(this.currentpage, this.currentpage);
        this.currentIndex = this.currentpage - 1;
        this.getdatalist();
      }
    },
    //渲染button按钮
    list() {
      //   console.log(this.msg);
      this.btnNum = Math.ceil(this.msg.length / this.pagesize); //btn的个数
    },
    //拿到数据进行剪切实现数据初始渲染
    getdatalist() {
      this.currentData = this.msg.slice(
        (this.currentpage - 1) * this.pagesize,
        this.currentpage * this.pagesize
      ); //currentData是一个数组
      bus.$emit("son3data", this.currentData);
      bus.$emit("son1data2", this.currentData);
    },
    //点击按钮实现数据切换
    dataswitch(index) {
      this.currentIndex = index;
      this.currentpage = index + 1;
      this.getdatalist();
    },
  },
};
</script>

<style lang='less' scoped>
.color {
  background-color: rgb(18, 19, 19);
  color: rgb(241, 247, 241);
}
</style>

//第三个子组件

<template>
  <div>
    <button class="btn1">添加</button>
    <table border="1vh" width="100%">
      <thead>
        <tr>
          <th>商品</th>
          <th>价格</th>
          <th>数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in newarr1" :key="index">
          <td>{{ item.goods }}</td>
          <td>{{ item.price }}</td>
          <td>{{ item.number }}</td>
          <td><button>删除</button></td>
        </tr>
      </tbody>
    </table>
    <son3></son3>
  </div>
</template>

<script>
import bus from "../js/bus.js";
export default {
  data() {
    return {
      shop: [
        { goods: "小米12", price: 3999, number: 1 },
        { goods: "华为P40", price: 4599, number: 1 },
        { goods: "oppo A9", price: 3399, number: 1 },
        { goods: "一加", price: 2999, number: 1 },
        { goods: "魅族18", price: 3689, number: 1 },
        { goods: "iphone14", price: 7999, number: 1 },
        { goods: "iphone12", price: 4999, number: 1 },
        { goods: "vivo10 ", price: 5500, number: 1 },
      ],
      newarr1: [],
    };
  },
  mounted() {
    bus.$emit("shop", this.shop);
  },
  created() {
    bus.$on("son1data2", (val) => {
      this.newarr1 = val;
    });
  },
};
</script>

<style lang="less" scoped>
table {
  text-align: center;
  // height: 30vh;
}
.btn1 {
  width: 80px;
  height: 40px;
  background-color: rgb(130, 179, 219);
  color: white;
  border-radius: 8px 8px;
  font-size: 20px;
}
</style>-->